<template>
  <view class="history-page bp">
    <view class="slot-white"></view>
    <view class="history-list" v-if="historyList && historyList.length !== 0">
      <view
        class="history-list-item flex-column mt-25"
        v-for="(item, index) of historyList"
        :key="index"
      >
        <view class="dish-items flex">
          <view
            v-for="(child, childIndex) of item.list"
            :key="childIndex"
            :class="['dish-item flex-column', { 'ml-25': childIndex !== 0 }]"
          >
            <wd-img
              :src="item.url[childIndex]"
              :width="88"
              :height="88"
              :enable-preview="true"
            ></wd-img>
            <view class="name mt-12">{{ child }}</view>
          </view>
        </view>
        <view class="time mt-24">
          <span>下单时间：</span>
          <span>{{ item.create_time }}</span>
        </view>
        <view class="operate mt-12">
          <wd-button
            custom-class="once-more"
            size="small"
            @click="onceMore(item)"
            style="background-color: red"
            >再来一单</wd-button
          >
        </view>
      </view>
    </view>

    <view v-else style="height: 100%; background-color: #fff !important">
      <view class="slot-white"></view>
      <wd-status-tip
        image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/search.png"
        tip="您还没有点过菜哦~"
      />
    </view>

    <wd-message-box />
  </view>
</template>

<script>
// 覆盖Wot Design Uni 默认样式
export default {
  options: {
    styleIsolation: "shared",
  },
};
</script>

<script setup>
import { ref, onMounted } from "vue";
import { useMessage } from "@/node_modules/wot-design-uni";

import { getOrderList, addOrderList } from "../../../api/menu";
import { toast } from "../../../utils/common";

const historyList = ref([]);

function getList() {
  getOrderList().then((res) => {
    if (res.code === 0) {
      historyList.value = res.data.map((item) => {
        item.list = item.list.split(",");
        item.url = item.url.split(",");
        return item;
      });
    }
  });
}

onMounted(() => getList());

const message = useMessage();
function onceMore(item) {
  message
    .confirm({
      msg: `确认再点一次【${item.list.join(",")}】嘛?`,
      confirmButtonProps: {
        customClass: "confirm-button-class",
        type: "success",
      },
    })
    .then(() => {
      addOrderList({
        list: item.list.join(","),
        url: item.url.join(","),
      }).then((res) => {
        if (res.code === 0) {
          toast({
            title: "您已成功下单!",
          });
          getList();
        }
      });
    })
    .catch(() => console.log("取消"));
}
</script>

<style scoped lang="scss">
.history-page {
  height: 100%;

  .slot-white {
    height: 25rpx;
    width: 100%;
    background-color: #fff;
  }

  .history-list {
    height: calc(100% - 25rpx);
    overflow-y: scroll;
    padding: 0 24rpx 24rpx;
    box-sizing: border-box;

    &-item {
      background-color: #fff;
      border-radius: 8px;
      padding: 24rpx;

      .dish-item {
        align-items: center;

        :deep(.wd-img) {
          image {
            border-radius: 24rpx;
          }
        }
      }

      .time {
        color: #d1d1d1;
      }

      .operate {
        text-align: right;

        :deep(.once-more) {
          background-color: $button-main-color;
        }
      }
    }
  }
}
</style>
